<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法4 v-mode双向绑定</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1 style="color: aqua;">知识点1:v-model双向绑定</h1>
        <h3>我们可以用v-model指令在表单input、textarea、select等元素进行双向绑定
            它会根据控件的类型自动获取正确的方法来更新元素。v-model会忽略所有表单元素的value等初始值
        </h3>
        <h3>1.单行文本框</h3>
        姓名:<input type="text" v-model="singleText">尊敬的{{singleText}}用户你好！
        <h3>2.多行文本框</h3>
        介绍：<textarea name="" id="" v-model="multiText"></textarea>
        我输入的介绍是：{{multiText}}
        <h3>3.单选框</h3>
        <h4>单选框在实际中是不能单独使用的，一般要两个及以上，只要统一设置变量，就可以实现radiogroup的效果</h4>
        <input type="radio" value="男神" v-model="radioValue">男生
        <input type="radio" value="美女" v-model="radioValue">女生
        <br>原来你是个{{radioValue}}啊！
        <h3>4.单个复选框:单个复选框通常用 true 和 false 进行选择</h3>
        <input type="checkbox" v-model="toggleValue">是否好孩子<br>
        {{toggleValue}}
        <h3>5.多个复选框：v-model接收数组型的变量</h3>
        你的爱好：
        <input type="checkbox" value="唱歌" v-model="checkValue">唱歌
        <input type="checkbox" value="跳舞" v-model="checkValue">跳舞
        <input type="checkbox" value="吃饭" v-model="checkValue">吃饭
        <input type="checkbox" value="打球" v-model="checkValue">打球
        <input type="checkbox" value="游戏" v-model="checkValue">游戏
        <br>你的爱好是:{{checkValue.join(',')}}
        <h3>6.单项下拉框</h3>
            <select name="" id="" v-model="singleSelect">
                <option value="Java">Java</option>
                <option value="python">python</option>
                <option value="vue">vue</option>
                <option value="c++">c++</option>
            </select><br>
            我知道你喜欢的课程:{{singleSelect}}
        <h3>7.多项下拉框</h3>
          <select name="" id="" multiple v-model="multiSelect">
             <option value="A">我是小A啊</option>
             <option value="B">我是小B啊</option>
             <option value="C">我是小C啊</option>
             <option value="Z">我是小Z啊</option>
             <option value="PP">我是小PP啊</option>
          </select><br>
          我挑选了这些人:{{multiSelect.join(',')}}




        <h1>课堂小练习</h1>
        用户名：<input type="text" v-model="username">
        <br>
        密码：<input type="password" v-model="password"><br>
        确认密码：<input type="password" v-model="confirmPassword" @blur="b()"><br>
        性别：
        <input type="radio" value="帅哥" v-model="gender">男
        <input type="radio" value="美女" v-model="gender">女
        <br>
        籍贯：
        <select v-model="hometown">
            <option value="台州">台州</option>
            <option value="杭州">杭州</option>
            <option value="宁波">宁波</option>
        </select><br>
        选择的课外课程：
        <input type="checkbox" value="吉他" v-model="courses">吉他
        <input type="checkbox" value="国画" v-model="courses">国画
        <input type="checkbox" value="街舞" v-model="courses">街舞
        <input type="checkbox" value="书法" v-model="courses">书法
        <br>
        <button @click="show()" type="submit">提交</button>





        <h1 style="color: aqua;">知识点2: v-model修饰符</h1>
                <h3>1.  .lazy修饰符: v-model在每次input事件触发后将输入框的数据与变量同步,添加 .lazy修饰符后,改成与change事件同步</h3>
                <input type="text" v-model.lazy="text">{{text}}
                <h3>2.  .number修饰符: 如果用户想自动将输入的值转换为数值型,可以加 .number修饰符</h3>
                <input type="text" v-model.number="num">
                {{num+1}}
                <h3>3.  .trim修饰符: 如果想要自动过滤前后的空白字符,可以加 .trim修饰符</h3>
                <input type="text" v-model.trim="text">
                {{text+"你好"}}   



    </div>
    
</body>
</html>
<script>
  const app = Vue.createApp({
    data() {
      return {
        singleText:'',//初始化了变量，用来存放文本框数据
        multiText:'',
        radioValue:'帅哥',
        toggleValue:'',
        checkValue:[],
        singleSelect:'',
        multiSelect:[],
        text:'',
        num:'',


        username: '',
        password: '',
        confirmPassword: '',
        gender: '',
        hometown: '',
        courses:[],
      }
    },
    methods: {
                 show(){
                alert("尊敬的来自"+this.hometown+"的"+this.username+this.singleText+",你是一位"+this.gender+",你选择的课程是："+this.courses.join(','));
            },
            b(){
                if(this.password !==this.confirmPassword){
                    alert("密码不一致")
                    this.password=''
                    this.confirmPassword=''
                }
            }
           
        }
  }).mount("#app")
</script>
